<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-06-09 15:31:54
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-06-09 18:27:03
 * @FilePath: \app\src\views\el\drag\TableRowSetUp\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-row-setup">
    <el-popover
      popper-class="table-row-setup__popper"
      placement="bottom-start"
      width="200"
      trigger="click"
    >
      <svg-icon
        slot="reference"
        icon-class="千层"
        class="table-row-setup__icon"
      />
      <div class="content">
        <div class="header">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >列展示</el-checkbox
          >
          <el-button type="text" @click="reset">重置</el-button>
        </div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <!-- 固定在左侧 -->
          <p class="group-title" v-if="citiesLeft.length">固定在左侧</p>
          <draggable
            v-model="citiesLeft"
            chosenClass="chosen"
            forceFallback="true"
            group="people"
            animation="100"
            ghostClass="ghost"
            handle=".el-checkbox"
            @start="start"
            @end="end"
          >
            <transition-group>
              <div
                class="row-item"
                v-for="(element, i) in citiesLeft"
                :key="`left_${i}`"
              >
                <el-checkbox
                  :label="element"
                  :disabled="disabledItem == element"
                >
                  <span>{{ element }}</span>
                </el-checkbox>
                <div class="ntns">
                  <!-- 不固定 -->
                  <span title="不固定">
                    <svg-icon
                      slot="reference"
                      icon-class="三明治"
                      @click="moveHandle('citiesLeft', i)"
                    />
                  </span>
                  <!-- 固定右侧 -->
                  <span title="固定右侧">
                    <svg-icon
                      slot="reference"
                      icon-class="茶"
                      @click="moveHandle('citiesLeft', i, 'toRight')"
                    />
                  </span>
                </div>
              </div>
            </transition-group>
          </draggable>
          <!-- 中间的 -->
          <p
            class="group-title"
            v-if="(citiesLeft.length || citiesRight.length) && cities.length"
          >
            不固定
          </p>
          <draggable
            v-model="cities"
            chosenClass="chosen"
            forceFallback="true"
            group="people"
            animation="100"
            ghostClass="ghost"
            handle=".el-checkbox"
            @start="start"
            @end="end"
          >
            <transition-group>
              <div class="row-item" v-for="(element, i) in cities" :key="i">
                <el-checkbox
                  :label="element"
                  :disabled="disabledItem == element"
                >
                  <span>{{ element }}</span>
                </el-checkbox>
                <div class="ntns">
                  <!-- 固定左侧 -->

                  <span title="固定左侧">
                    <svg-icon
                      slot="reference"
                      icon-class="荷包蛋"
                      @click="moveHandle('cities', i, 'toLeft')"
                    />
                  </span>
                  <!-- 固定右侧 -->
                  <span title="固定右侧">
                    <svg-icon
                      slot="reference"
                      icon-class="茶"
                      @click="moveHandle('cities', i, 'toRight')"
                    />
                  </span>
                </div>
              </div>
            </transition-group>
          </draggable>
          <!-- 固定在右侧 -->
          <p class="group-title" v-if="citiesRight.length">固定在右侧</p>
          <draggable
            v-model="citiesRight"
            chosenClass="chosen"
            forceFallback="true"
            group="people"
            animation="100"
            ghostClass="ghost"
            handle=".el-checkbox"
            @start="start"
            @end="end"
          >
            <transition-group>
              <div
                class="row-item"
                v-for="(element, i) in citiesRight"
                :key="`right_${i}`"
              >
                <el-checkbox
                  :label="element"
                  :disabled="disabledItem == element"
                >
                  <span>{{ element }}</span>
                </el-checkbox>
                <div class="ntns">
                  <!-- 固定左侧 -->

                  <span title="固定左侧">
                    <svg-icon
                      slot="reference"
                      icon-class="荷包蛋"
                      @click="moveHandle('citiesRight', i, 'toLeft')"
                    />
                  </span>
                  <!-- 不固定 -->
                  <span title="不固定">
                    <svg-icon
                      slot="reference"
                      icon-class="三明治"
                      @click="moveHandle('citiesRight', i)"
                    />
                  </span>
                </div>
              </div>
            </transition-group>
          </draggable>
        </el-checkbox-group>
      </div>
    </el-popover>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳", "成都", "武汉", "台湾"];
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      left: [],
      right: [],
      checkAll: false,
      checkedCities: ["上海", "北京"],
      citiesLeft: [],
      citiesRight: [],
      cities: [...cityOptions],
      isIndeterminate: true,
      disabledItem: -1,
    };
  },
  computed: {
    citiesArray() {
      return [...this.citiesLeft, ...this.cities, ...this.citiesRight];
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.citiesArray.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.citiesArray.length;
    },
    reset() {
      this.checkedCities = ["上海", "北京"];
      this.citiesLeft = [];
      this.citiesRight = [];
      this.cities = [...cityOptions];
      this.checkAll = false;
      this.isIndeterminate = true;
    },
    start(e) {
      this.disabledItem = e.item._underlying_vm_;
    },
    end() {
      this.disabledItem = "";
    },
    // 移动当前元素
    moveHandle(form, i, to) {
      if (to == "toLeft") {
        this.citiesLeft.push(this[form][i]);
        this[form].splice(i, 1);
      } else if (to == "toRight") {
        this.citiesRight.push(this[form][i]);
        this[form].splice(i, 1);
      } else {
        this.cities.push(this[form][i]);
        this[form].splice(i, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-row-setup {
  text-align: end;
  &__icon {
    font-size: 30px;
  }
}
.table-row-setup__popper {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0 8px;
  }
  .row-item {
    padding: 0 8px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-checkbox {
      flex: 1;
    }
    .ntns {
      display: none;
      cursor: pointer;
      & > * {
        margin-left: 4px;
        font-size: 20px;
      }
    }
    &:hover {
      .ntns {
        display: block;
      }
    }
  }
  .chosen {
    background-color: #fff;
  }
  .ghost {
    background-color: rgb(230, 247, 255);
  }
  .group-title {
    font-size: 12px;
    color: #ccc;
    padding: 5px 8px;
    margin: 0;
    user-select: none;
  }
}
</style>
<style>
.table-row-setup__popper {
  padding: 0;
}
</style>